<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自定义动画</title>
	<script src="js/vue221.js"></script>
	<style>
		@keyframes fn{
			0%{
				/*opacity:0;*/
				color:red;
			}
			50%{
				/*opacity:1;*/
				color:green;
			}
			100%{
				/*opacity:0;*/
				color:yellow;
			}
		}
		.an{
			animation:fn 2s linear;
		}
	</style>
</head>
<body>
	<div id="app">
		<transition name="fade" enter-active-class="an" leave-active-class="an">
			<p v-if="show">hello world</p>
		</transition>
		<button @click="change()">改变</button>
	</div>
	<script>
		let vm=new Vue({
			el:"#app",
			data:{
				show:true
			},
			methods:{
				change:function(){
					this.show=!this.show
				}
			}
		})
	</script>
</body>
</html>